<template>
  <div class="box" style="width: 70%;margin: 0 auto;padding:30px;">
    <el-breadcrumb id="topLink" separator-class="el-icon-arrow-right" separator="/">
      <el-breadcrumb-item :to="{ path: '/theme0/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row style="height: 60%;margin-bottom: 20px;" class="header">
      <el-col :span="24" style="margin-top:50px; font-weight: bold">
        {{ viewData.title }}
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="info">
          <span>{{ viewData.createTime }}发布</span>
          <span>{{ viewData.previewCount }}人已读</span>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div class="text" v-html="viewData.richContent" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import api from '@/api/note/ApiNote'

export default {
  name: 'NoteView',
  data() {
    return {
      viewData: undefined
    }
  },
  mounted() {
    api.view(this.$route.query.id).then(res => {
      this.viewData = res.data.data
    })
  },
  methods: {}
}
</script>
<style>
  #topLink .el-breadcrumb__inner, #topLink .el-breadcrumb__inner a {
    color: #ff7200 !important;
  }
</style>
<style scoped>
  .box {
  }
  .info {
    font-family: "Microsoft Yahei", "微软雅黑";
    font-size: 14px;
    font-style: normal;
    margin: 0;
    padding: 0;
    font-weight: normal;
    box-sizing: border-box;
    margin-top: 16px;
    color: #999999;
    text-align: right;
  }
</style>
